<template>
    <div class="login-container">
        <el-card class="login-card" shadow="hover">
            <template #header>
                <h3>登录</h3>
            </template>
            <el-form ref="ruleFormRef" class="login-form" autocomplete="on"
                     :model="loginData"
                     :rules="loginFormRules"
                     label-position="top" status-icon>
                <el-form-item label="用户名" prop="userName">
                    <el-input placeholder="请输入用户名" v-model="loginData.userName" name="userName" type="text"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码" v-model="loginData.password" name="password" show-password
                              type="password"/>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-row justify="space-between" style="width: 100%">
                        <el-col :span="12">
                            <el-input placeholder="验证码" v-model="loginData.code" name="code" type="text"/>
                        </el-col>
                        <el-col :span="12" class="code-box">
                            <el-image class="code"
                                      :src="codeImage"
                                      v-loading="codeLoading"
                                      @click="loadCaptcha()"
                            ></el-image>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-row justify="center">
                    <el-button type="primary" @click="Login(ruleFormRef)">提交</el-button>
                </el-row>
            </el-form>
        </el-card>
    </div>

</template>

<script setup>
import {particles} from "@/utils/particles"
import {onMounted, onUpdated, ref, reactive} from "vue";
import {ElMessage} from "element-plus"
import {useRouter} from "vue-router";
import {loginFormRules} from "@/rules/UserFormRules";
import {adminLogin, adminUserInfo, getCaptcha} from "@/api/user";
import {setToken} from "@/utils/auth";
import {useStore} from "vuex";

const store = useStore();
const router = useRouter();
let codeImage = ref();
const ruleFormRef = ref(null);
const codeLoading = ref(true);
let loginData = reactive({
    userName: "",
    password: "",
    code: "",
    key: ""
});

function loadCaptcha() {
    getCaptcha().then(response => {
        codeImage.value = response.data.image;
        loginData.key = response.data.key
        codeLoading.value = false;
    })
}

async function Login(formEl) {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
            if (valid) {
                const response = await adminLogin(loginData);
                await setToken(response.data.token)
                await store.dispatch("user/setRole", "admin")
                const userInfo = await adminUserInfo();
                await store.dispatch("user/setUserInfo", userInfo.data)
                ElMessage({
                    message: '登录成功，1秒后跳转到主页',
                    type: 'success',
                    duration: 1000
                })
                const t = setInterval(() => {
                    router.push('/admin/dashboard');
                    clearInterval(t)
                }, 1000);
            } else {
                ElMessage({
                    message: '请完成所有必填字段',
                    type: 'warning',
                    duration: 5 * 1000
                })
            }
        }
    )
}

onMounted(() => {
    loadCaptcha();
})

onUpdated(() => {
    loadCaptcha();
})


</script>

<style scoped>
.login-container {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: pink;
}

.login-form, .login-card {
    min-width: 30%;
}

.code-box {
    text-align: right;
    height: 32px;
}

.code {
    height: 32px;
}


.login-card {
    padding: 1rem;
}
</style>